<div style="display: flex; gap: 10px; flex-wrap: wrap;">
  <b-dropdown placement="bottomLeft">
    <b-button>bottomLeft(default)</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>

  <b-dropdown placement="bottom">
    <b-button>bottom</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>

  <b-dropdown placement="bottomRight">
    <b-button>bottomRight</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>

  <b-dropdown placement="topLeft">
    <b-button>topLeft</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>

  <b-dropdown placement="top">
    <b-button>top</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>

  <b-dropdown placement="topRight">
    <b-button>topRight</b-button>
    <b-menu slot="drop" style="max-width: 200px;">
      <b-menu-item>Option 1</b-menu-item>
      <b-menu-item>Option 2</b-menu-item>
      <b-menu-item>Option 3</b-menu-item>
      <b-menu-item>Option 4</b-menu-item>
      <b-menu-item>Option 5</b-menu-item>
      <b-divider></b-divider>
      <b-menu-item>Option A</b-menu-item>
      <b-menu-item>Option B</b-menu-item>
    </b-menu>
  </b-dropdown>
</div>